<template>
    <router-view v-slot="{ Component, route }">
        <KeepAlive :include="keepAliveRouteNames">
            <component :is="Component" v-if="appStore.reloadFlag" :key="appStore.aliveKeys[route.name] || route.fullPath" />
        </KeepAlive>
    </router-view>
</template>
  
<script setup>
import { useAppStore } from "@/stores/app";
import { useRouter } from "vue-router";
import { computed } from 'vue';

const appStore = useAppStore();
const router = useRouter();

const allRoutes = router.getRoutes();
const keepAliveRouteNames = computed(() => {
    return allRoutes
        .filter((route) => route.meta?.keepAlive)
        .map((route) => route.name);
});
</script>